<template>
  <vxe-modal :loading="loading" min :close-on-click-modal="false"
             :key="dialogKey" v-model="ziVisible" title="查看文档内容" width="70%" esc-closable showFooter show-zoom resize>
    <div style="height: 77vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <div slot="header" class="clearfix" style="text-align: center">
          <span style="font-size: 16px; color: #1890ff;">{{sxName}}</span>
        </div>
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="sxNr"></div>
            </div>
          </div>

        </el-card>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button size="small" @click="cancel">
        <svg-icon icon-class="cancel1" class-name='custom-class' />关 闭
      </el-button>
    </div>
  </vxe-modal>
</template>

<script>
import {getKfwd} from "@/api/kfwd/kfwd";
import {getGrsxjl} from "@/api/ejkgl/grsxjl";

export default {
  name: "GrSxJlXq", //个人事项记录详情
  data() {
    return {
      dialogKey: 0,
      loading: false,
      ziVisible: false,
      rowData: null,
      sxData: null,
      sxName: null,
      sxNr: null,
    }
  },
  methods: {
    cancel() {
      this.ziVisible = false;
    },
    handleOpen(row) {
      this.loading = true
      this.dialogKey++
      this.ziVisible = true;
      this.rowData = row;
      this.getGrSxJlXqData();
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    getGrSxJlXqData() {
      const grsxjlId = this.rowData.grsxjlId;
      getGrsxjl(grsxjlId).then(res => {
        this.sxData = res.data
        this.sxName = this.sxData.sxName
        this.sxNr = this.sxData.sxNr
      })

    }
  }
}
</script>

<style scoped>

</style>
